<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入 Vue.js -->
    <script src="/assets/vue/vue.global.js"></script>
    <!-- 引入 Element Plus -->
    <script src="/assets/element-plus/index.full.js"></script>
    <!-- 引入 Axios -->
    <script src="/assets/axios/axios.js"></script>
    <!-- 引入自定义安全模块 -->
    <script src="/assets/oa/security.js"></script>
    <style>
        /* 自定义样式 */
        .info .el-col,.info .el-select ,.info .el-input{
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题 -->
    <h2>管理员列表</h2>
    <!-- 管理员信息表格 -->
    <el-table
            ref="singleTable"
            :data="tableData"
            style="width: 100%">
        <!-- 序号列 -->
        <el-table-column type="index" width="50">
        </el-table-column>
        <!-- 管理员ID列 -->
        <el-table-column property="managerid" label="管理员ID" width="180">
        </el-table-column>
        <!-- 管理员登录账户名列 -->
        <el-table-column property="managername" label="账户名" width="120">
        </el-table-column>
        <!-- 管理员状态列 -->
        <el-table-column label="管理员状态">
            <template #default="{ row }">
                <el-select v-model="row.managerstatus" @change="updateManagerStatus(row)">
                    <el-option label="使用中" value="使用中"></el-option>
                    <el-option label="禁用" value="禁用"></el-option>
                    <el-option label="注销" value="注销"></el-option>
                </el-select>
            </template>
        </el-table-column>
        <!-- 管理员权限列 -->
        <el-table-column property="supermanagerpurview" label="管理员权限">
        </el-table-column>
        <!-- 创建时间列 -->
        <el-table-column property="createtime" label="创建时间" :formatter="formatTimestamp" width="165">
        </el-table-column>
        <!-- 更新时间列 -->
        <el-table-column property="updatetime" label="更新时间" :formatter="formatTimestamp" width="165">
        </el-table-column>
        <!-- 头像地址列 -->
        <el-table-column property="profilepicture" label="头像">
            <template #default="{ row }">
                <img :src="getImageUrl(row.profilepicture)" alt="头像" style="max-width: 100px; max-height: 100px;">
            </template>
        </el-table-column>
        <!-- 在表格中添加操作列 -->
        <el-table-column label="操作" width="180">
            <template #default="{ row }">
                <el-button type="primary" @click="editAdmin(row)">详情</el-button>
                <el-button type="danger" @click="deleteAdmin(row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
</div>

<script>
    // 定义 Main 组件
    var Main = {
        data() {
            return {
                tableData: [] // 管理员信息数据
            }
        },
        methods: {
            updateManagerStatus(manager) {
                console.info("updateManagerStatus 参数校验是否有值：")
                console.info(manager.managerid)
                console.info(manager.managerstatus)
                axios.post("/managerinfo/updateStatus", { managerId: manager.managerid, status: manager.managerstatus })
                    .then(response => {
                        // 更新表格数据
                        this.fetchAdminData();
                        console.log("管理员状态更新成功");
                    })
                    .catch(error => {
                        console.error("管理员状态更新失败：" + error);
                    });
            }
            ,formatTimestamp(row, column) {
                const timestamp = row[column.property];
                if (!timestamp) return ''; // 如果时间戳不存在，则返回空字符串
                const date = new Date(timestamp);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
            // 更新管理员状态的方法...
            ,fetchAdminData() {
                // 重新获取管理员信息数据
                axios.get("/managerinfo/queryAll")
                    .then(response => {
                        console.info("重新获取数据成功，以下打印：")
                        console.info(response)
                        // 将获取到的管理员信息数据赋值给表格数据
                        this.tableData = response.data.data;
                    })
                    .catch(error => {
                        console.error("重新获取管理员信息失败：" + error);
                    });
            }
            ,getImageUrl(profilepicture) {
                // 假设后端图片存储在 /imgs 目录下
                return `/images/${profilepicture}`;
            }
            // 其他方法...
            ,editAdmin(row) {
                // 获取管理员ID
                const managerId = row.managerid;
                // 构造编辑页面的URL，并跳转到该页面
                window.location.href = `/manager_info.html?managerId=${managerId}`;
            }
            ,deleteAdmin(row) {
                // 使用 Element Plus 的 el-message-box 组件弹出确认框
                this.$confirm('此操作将永久删除该管理员，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 用户点击了确定按钮，执行删除操作
                    console.log("删除管理员：" + row.managerid);
                    axios.post("/managerinfo/delete", { managerId: row.managerid })
                        .then(response => {
                            // 删除成功后，重新获取管理员信息数据
                            this.fetchAdminData();
                            console.log("管理员删除成功");
                        })
                        .catch(error => {
                            console.error("管理员删除失败：" + error);
                        });
                }).catch(() => {
                    // 用户点击了取消按钮，不执行任何操作
                    console.log("取消删除管理员：" + row.managerid);
                });
            }


        },
        mounted() {
            // 页面加载完成时获取管理员信息数据
            this.fetchAdminData();
        }
    };

    // 创建 Vue 应用
    const app = Vue.createApp(Main);
    // 使用 Element Plus
    app.use(ElementPlus);
    // 挂载至 #app
    app.mount("#app");
</script>

</body>
</html>
